<!DOCTYPE html>
<html>
<head>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" media="all">
  <link rel="stylesheet" id="font-awesome-css" href="/data/font-awesome.min.css" type="text/css" media="all">
  <script type="text/javascript" src="/static/layui/layui.js"></script>
  <style type="text/css">
    .header span{background:#009688;margin-left:5px;padding:10px;color:#ffffff;}
    .header div{border-bottom:solid 2px #009688;margin-top: 8px;}
    .header button{float:right;margin-top:-5px;}
  </style>
</head>
<body style="padding:10px; box-sizing: border-box;">
<div class="header">
  <span>分类列表</span>
  <button type="button" class="layui-btn layui-btn-sm" onclick="add()">
    <i class="layui-icon layui-icon-addition"></i> 添加</button>
  <div></div>
</div>
<table class="layui-table">
  <thead>
  <tr>
    <th>分类名</th>
    <th>图标</th>
    <th>排序</th>
    <th>状态</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  {foreach($lists as $lists_v)}
    <tr>
      <td>
        {if($lists_v['parent_id']==0)}
        <div style="text-align:left">{$lists_v['title']}</div>
        {else/}
        <div style="text-align:left; padding-right:20px">　　{$lists_v['title']}</div>
        {/if}
      </td>
      <td>
        <i class="fa {$lists_v['icon']} fa-fw"></i>
        <span style="margin-left:5px">{$lists_v['icon']}</span>
      </td>
      <td>
        {if($lists_v['parent_id']==0)}
        <div style="text-align:left">{$lists_v['sort']}</div>
        {else/}
        <div style="text-align:left; padding-right:20px">　　{$lists_v['sort']}</div>
        {/if}
      </td>
      <td>
        <div style="display:flex; font-weight:bold; justify-content:center; align-items:center; width:100%">
          {if($lists_v['show']==0)}
          <div style="color:#08ff00; margin-right:15px">显示</div>
          {else/}
          <div style="color:#ff0000; margin-right:15px">隐藏</div>
          {/if}
          {if($lists_v['encrypt']==0)}
          <div style="color:#08ff00">公开</div>
          {else/}
          <div style="color:#ff0000">加密</div>
          {/if}
        </div>
      </td>
      <td>
        <button type="button" class="layui-btn layui-btn-xs" onclick="dit({$lists_v['id']}, {$lists_v['parent_id']})">修改</button>
        <button type="button" class="layui-btn layui-btn-xs" onclick="del({$lists_v['id']})">删除</button>
      </td>
    </tr>
  {/foreach}
  </tbody>
</table>
</body>
<script type="text/javascript">
  layui.use(['layer','form'], function(){
    $ = layui.jquery;
    layer = layui.layer;
    form = layui.form;
  });
  function add(){
    layer.open({
      type:2,
      title:'添加分类',
      shade:0.3,
      content: '/admin/fenleiadd',
      area: ['450px', '450px']
    })
  }
  function dit(id, parent_id){
    layer.open({
      type:2,
      title:'修改分类',
      shade:0.3,
      content: '/admin/fenleidit?id='+id+'&parent_id='+parent_id,
      area: ['450px', '450px']
    })
  }
  function del(id){
    layer.open({
      title:'删除',
      content: '是否删除分类？',
      shade:0.3,
      btn: ['确认', '取消'],
      yes: function(){
        $.get('/admin/fenleidel?id='+id,
                function(res){
                  console.log(res);
                  if (res.code==0) {
                    layer.msg(res.msg,{"icon":1});
                    setTimeout(function () {
                      window.location.reload();
                    },1000)
                  } else {
                    layer.msg(res.msg,{"icon":2});
                  }
                }, "json");
      }
    })
  }
  </script>
</html>